<template>
	<view style="width: 100%;text-align: cneter;">
		<!-- <view class="item" @click="select(index)" v-for="(item,index) in valueRange" :key="item.id">{{item.title}}</view> -->
		<picker mode="multiSelector" @change="bindRegionChange"
			@columnchange="bindMultiPickerColumnChange" :value="valueRegion" :range="multiArray">
			<view class='acea-row'>
				<view class="picker">{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
				<view class='iconfont icon-dizhi fontcolor' style="margin-left: 10rpx;"></view>
			</view>
		</picker>
	</view>
</template>

<script>
	import { getCity } from '@/api/api.js';
	export default{
		props:{
			where:{
				type: Object
			}
		},
		data(){
			return {
				region: [`省`, `市`, `区`], 
				valueRegion: [0, 0, 0],
				district: [],
				multiArray: [],
				multiIndex: [0, 0, 0],
			}
		},
		mounted(){
			this.getCityList()
			if(this.where.from_addr && this.where.from_addr.title){
				this.region = this.where.from_addr.title.split(",")
			}
		},
		methods:{
			bindRegionChange(e) {
				let multiIndex = this.multiIndex,
					province = this.district[multiIndex[0]] || {
						c: []
					},
					city = province.c[multiIndex[1]] || {
						v: 0
					},
					multiArray = this.multiArray,
					value = e.detail.value;
			
				this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
				this.cityId = city.v
				this.valueRegion = [0, 0, 0]
				this.initialize();
				this.$emit("onSelect", {index:this.region.join(",")});
			},
			bindMultiPickerColumnChange(e) {
				let that = this,
					column = e.detail.column,
					value = e.detail.value,
					currentCity = this.district[value] || {
						c: []
					},
					multiArray = that.multiArray,
					multiIndex = that.multiIndex;
				multiIndex[column] = value;
				switch (column) {
					case 0:
						let areaList = currentCity.c[0] || {
							c: []
						};
						multiArray[1] = currentCity.c.map((item) => {
							return item.n;
						});
						multiArray[2] = areaList.c.map((item) => {
							return item.n;
						});
						break;
					case 1:
						let cityList = that.district[multiIndex[0]].c[multiIndex[1]].c || [];
						multiArray[2] = cityList.map((item) => {
							return item.n;
						});
						break;
					case 2:
			
						break;
				}
				// #ifdef MP || APP-PLUS
				this.$set(this.multiArray, 0, multiArray[0]);
				this.$set(this.multiArray, 1, multiArray[1]);
				this.$set(this.multiArray, 2, multiArray[2]);
				// #endif
				// #ifdef H5 
				this.multiArray = multiArray;
				// #endif
				this.multiIndex = multiIndex
			},
			select(index){
				this.$emit("onSelect", {index})
			},
			getCityList() {
				let that = this;
				getCity().then(res => {
					this.district = res.data
					that.initialize();
				})
			},
			initialize() {
				let that = this,
					province = [],
					city = [],
					area = [];
				let cityChildren = that.district[0].c || [];
				let areaChildren = cityChildren.length ? (cityChildren[0].c || []) : [];
				that.district.forEach((item, i) => {
					province.push(item.n);
					if (item.n === this.region[0]) {
						this.valueRegion[0] = i
						this.multiIndex[0] = i
					}
				});
				that.district[this.valueRegion[0]].c.forEach((item, i) => {
					if (this.region[1] == item.c) {
						this.valueRegion[1] = i
						this.multiIndex[1] = i
					}
					city.push(item.n);
				});
				that.district[this.valueRegion[0]].c[this.valueRegion[1]].c.forEach((item, i) => {
					if (this.region[2] == item.c) {
						this.valueRegion[2] = i
						this.multiIndex[2] = i
					}
					area.push(item.n);
				});
				this.multiArray = [province, city, area]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		width: 100%;
		text-align: center;
		padding: 20rpx 0;
		border-bottom: solid 1px #eee;
		font-size: 30rpx;
	}
</style>